<template>
	<div class="keepalives">
		<div class="menus">
			<app-link :to="item.path" v-for="(item,index) in menus" :key="index" :class="['el', { active: currentMenus === index }]" @click="menusFn(item,index)" >{{ item.title }}</app-link>
		</div>
		<div class="contents">
			<div class="heads">
				<button
					v-for="(tab,index) in tabsMemus"
					:key="index"
					v-bind:class="['tab-button', { active: currentTab === tab.title }]"
					@click="currentTab = tab"
				>
					{{ tab.title }}
					<span>×</span>
				</button>
			</div>
			<div class="cnt">
				<IframeRouterView />
			</div>
		</div>
	</div>
</template>

<script>
import AppLink from './link'
import IframeRouterView from "@/views/component/iframe-router-view.vue";
import _Qs from "underscore";
export default {
	data() {
		return {
			currentMenus: 0, // 菜单 当前高亮
			currentTab: "", // 菜单 当前高亮
			tabsMemus: []
		};
	},
	components: {
		 AppLink,
		IframeRouterView
	},
	computed: {
		menus() {
			return this.$router.options.routes;
		}
	},
	created() {
		this.tabsMemus.push(this.$router.options.routes[0]);
		this.currentTab = this.$router.options.routes[0].title;
		this.getComponentsArr();
	},
	methods: {
		menusFn(item, index) {
			this.currentMenus = index;
			// this.tabsMemus.forEach(route => {
			// 	console.log(route.title, item.title, "路由：");
			// 	if (route.title === item.title) {
			// 		console.log("ssss::");
			// 	}
			// });

			this.tabsMemus.push(item);
			this.currentTab = item.title;
		},
		getComponentsArr() {
			console.log(this.$router.options.routes,'this.$router.options.routes :;')
		}
	}
};
</script>

<style scoped>
.keepalives {
	display: flex;
	box-sizing: border-box;
	flex: auto;
}
.menus {
	width: 208px;
	overflow: hidden;
	flex: 0 0 208px;
	max-width: 208px;
	min-width: 208px;
	background: #000;
	color: #fff;
	padding: 20px 0px;
}
.menus .el {
	line-height: 40px;
	font-size: 30px;
	text-align: center;
	line-height: 40px;
	font-size: 15px;
	display:block;
	color:#fff;
	cursor: pointer;
	border-bottom: 1px solid #ccc;
}
.menus .el.active {
	background: #19be6b;
}
.tab-button {
	padding: 6px 10px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border: 1px solid #ccc;
	cursor: pointer;
	background: #f0f0f0;
	margin-bottom: -1px;
	margin-right: -1px;
}
.tab-button.active {
	background: #19be6b;
	color: #fff;
}
.tab-button span {
	padding: 5px;
}
.contents {
	display: flex;
	flex: auto;
	flex-direction: column;
	min-height: 0;
	background: #f0f2f5;
}
.cnt {
	padding: 30px;
}
</style>